<%@ include file="/WEB-INF/templates/includes/taglibs.jsp"%>

<div id="skill-group" class="control-group">
    <label class="control-label" for="skills">Skills</label>
    <c:choose>
        <c:when test="${empty cvForm.skills}">
            <div class="controls">
                <input type="text" id="skills_0" name="skills[0].name" placeholder="Skill">
                <select id="skill-select" name="skills[0].level" data-other="0">
                    <option>Beginner</option>
                    <option>Intermediate</option>
                    <option>Advanced</option>
                    <option value="other">Other..</option>
                </select>
                <div class="move-arrows"><span class="arrow-up icon-circle-arrow-up"></span><span class="arrow-down icon-circle-arrow-down"></span></div>
            </div>
        </c:when>
        <c:otherwise>
            <c:forEach items="${cvForm.skills}" var="skill" varStatus="index">
                <c:set var="addedClass" value=""/>
                <c:if test="${index.index gt 0}">
                    <c:set var="addedClass" value=" added"/>
                </c:if>
                <div class="controls${addedClass}">
                    <input type="text" id="skills_${index.index}" name="skills[${index.index}].name" placeholder="Skill" value="${skill.name}"/>
                    <select id="skill-select_${index.index}" name="skills[${index.index}].level" data-other="${index.index}">
                        <c:set var="beginnerSelected" value=""/>
                        <c:set var="intermediateSelected" value=""/>
                        <c:set var="advancedSelected" value=""/>
                        <c:set var="otherSelected" value=""/>
                        <c:choose>
                            <c:when test="${skill.level eq 'Beginner'}">
                                <c:set var="beginnerSelected" value="selected='selected'"/>
                            </c:when>
                            <c:when test="${skill.level eq 'Intermediate'}">
                                <c:set var="intermediateSelected" value="selected='selected'"/>
                            </c:when>
                            <c:when test="${skill.level eq 'Advanced'}">
                                <c:set var="advancedSelected" value="selected='selected'"/>
                            </c:when>
                            <c:otherwise>
                                <c:set var="otherSelected" value="selected='selected'"/>
                            </c:otherwise>
                        </c:choose>
                        <option ${beginnerSelected}>Beginner</option>
                        <option ${intermediateSelected}>Intermediate</option>
                        <option ${advancedSelected}>Advanced</option>
                        <option value="other">Other..</option>
                        <c:if test="${otherSelected ne ''}">
                            <option class data-otheroption="skill-select-${index.index}" selected="selected">${skill.level}</option>
                        </c:if>
                    </select>
                    <div class="move-arrows"><span class="arrow-up icon-circle-arrow-up"></span><span class="arrow-down icon-circle-arrow-down"></span></div>
                    <c:if test="${index.index gt 0}">
                        <button class="remove btn btn-danger" type="button"><span class="icon-remove icon-white"></span> Remove</button>
                    </c:if>
                </div>
            </c:forEach>
        </c:otherwise>
    </c:choose>
    <button id="add-skill" class="btn btn-info" type="button"><span class="icon-plus icon-white"></span> Add Skill</button>
</div>
